<template>
  <div>
    <div class="header">
      <div class="div">
        <p>每时每课 因你而设</p>
        <p>在线辅导 · 答疑</p>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  // 组件状态值
  data() {
    return {
      username: "",
      password: "",
    };
  },
  // 生命周期
  mounted() {},
  // 组件方法
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
};
</script> 

<style scoped>
.div{
  width: 100%;
  height: 150px;
  text-align: center;
  line-height: 50px;
}
</style>
